<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日记详情 - 暖言树洞</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="page">
        <!-- Header -->
        <div class="page-header">
            <button class="header-back">
                <i class="fas fa-arrow-left"></i>
            </button>
            <h1 class="header-title">日记详情</h1>
            <div class="flex items-center">
                <button class="header-action mr-2" onclick="shareDiary()">
                    <i class="fas fa-share"></i>
                </button>
                <button class="header-action" onclick="showMoreOptions()">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
        </div>

        <!-- Main Content -->
        <div class="page-content">
            <!-- Diary Content -->
            <div class="card mb-6">
                <div class="flex items-center mb-4">
                    <span class="mood-emoji">😊</span>
                    <div class="flex-1">
                        <h2 class="text-xl font-semibold mb-1">今天的阳光很温暖</h2>
                        <div class="text-sm text-neutral-500">
                            <i class="fas fa-clock mr-1"></i>
                            1小时前发布
                        </div>
                    </div>
                </div>
                
                <div class="prose">
                    <p class="text-base leading-relaxed text-neutral-700 mb-4">
                        走在路上看到小猫咪晒太阳，突然觉得生活还是很美好的。即使最近工作有些忙碌，但是这样的小瞬间总能让人重新燃起对生活的热爱。
                    </p>
                    <p class="text-base leading-relaxed text-neutral-700">
                        希望每个人都能在忙碌的生活中发现这样的小确幸，让温暖传递下去。
                    </p>
                </div>

                <!-- Tags -->
                <div class="flex flex-wrap gap-2 mt-4">
                    <span class="inline-block bg-primary-100 text-primary-700 px-3 py-1 rounded-full text-xs">
                        #治愈系
                    </span>
                    <span class="inline-block bg-secondary-100 text-secondary-700 px-3 py-1 rounded-full text-xs">
                        #小确幸
                    </span>
                    <span class="inline-block bg-warning-100 text-warning-700 px-3 py-1 rounded-full text-xs">
                        #正能量
                    </span>
                </div>
            </div>

            <!-- AI Response -->
            <div class="card mb-6 bg-gradient-to-r from-primary-50 to-secondary-50">
                <div class="flex items-start">
                    <div class="ai-cat mr-4 animate-bounce">
                        🤖
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="font-semibold text-primary">AI猫猫的暖言回复</h3>
                            <div class="warmth-stars">
                                <i class="fas fa-star warmth-star"></i>
                                <i class="fas fa-star warmth-star"></i>
                                <i class="fas fa-star warmth-star"></i>
                                <i class="fas fa-star warmth-star"></i>
                                <i class="fas fa-star-half-alt warmth-star"></i>
                                <span class="text-xs text-neutral-600 ml-1">4.5</span>
                            </div>
                        </div>
                        <div class="bg-white bg-opacity-70 rounded-lg p-4">
                            <p class="text-sm leading-relaxed">
                                看到你发现生活中的小美好，我也很开心呢！阳光和小猫咪都是治愈的存在，愿你每天都能发现这样的温暖时刻~ 🐱☀️
                            </p>
                            <p class="text-sm leading-relaxed mt-2">
                                你说得对，忙碌的生活中这些小确幸特别珍贵。保持这份感受美好的能力，你的温暖也会感染更多人的。继续加油哦！
                            </p>
                        </div>
                        <div class="flex items-center justify-between mt-3">
                            <span class="text-xs text-neutral-500">
                                <i class="fas fa-robot mr-1"></i>
                                2分钟前回复
                            </span>
                            <div class="flex items-center gap-2">
                                <button class="btn-text text-xs" onclick="rateAIResponse()">
                                    <i class="fas fa-thumbs-up mr-1"></i>
                                    有帮助
                                </button>
                                <button class="btn-text text-xs" onclick="reportAIResponse()">
                                    <i class="fas fa-flag mr-1"></i>
                                    反馈
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Interaction Stats -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-chart-line mr-2 text-primary"></i>
                    互动数据
                </h3>
                <div class="grid grid-cols-3 gap-4">
                    <div class="text-center">
                        <div class="text-2xl font-bold text-secondary mb-1">12</div>
                        <div class="text-xs text-neutral-500">收到暖心</div>
                        <div class="text-xs text-neutral-400">+3 暖心币</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-info-500 mb-1">3</div>
                        <div class="text-xs text-neutral-500">漂流次数</div>
                        <div class="text-xs text-neutral-400">覆盖3人</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-warning-500 mb-1">4.5</div>
                        <div class="text-xs text-neutral-500">暖心指数</div>
                        <div class="text-xs text-neutral-400">⭐⭐⭐⭐⭐</div>
                    </div>
                </div>
            </div>

            <!-- Comments from Drift -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-comments mr-2 text-primary"></i>
                    漂流点评
                    <span class="text-xs text-neutral-500 ml-2">(2条)</span>
                </h3>

                <!-- Comment 1 -->
                <div class="border-b border-neutral-200 pb-4 mb-4">
                    <div class="flex items-start">
                        <div class="w-8 h-8 bg-gradient-to-br from-primary-400 to-secondary-400 rounded-full flex items-center justify-center text-white text-sm mr-3">
                            A
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-neutral-700">匿名用户A</span>
                                <div class="flex items-center">
                                    <div class="warmth-stars mr-2">
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                    </div>
                                    <span class="text-xs text-neutral-500">6小时前</span>
                                </div>
                            </div>
                            <p class="text-sm text-neutral-700 leading-relaxed">
                                你的心情感染了我！确实，生活中的小美好值得我们停下来感受。愿你每天都能发现这样的温暖时刻。🌸
                            </p>
                            <div class="flex items-center justify-between mt-2">
                                <div class="flex items-center text-xs text-neutral-500">
                                    <i class="fas fa-heart mr-1 text-secondary"></i>
                                    <span>5人觉得有帮助</span>
                                </div>
                                <button class="btn-text text-xs">
                                    <i class="fas fa-heart mr-1"></i>
                                    赞同
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Comment 2 -->
                <div class="pb-4">
                    <div class="flex items-start">
                        <div class="w-8 h-8 bg-gradient-to-br from-success-400 to-info-400 rounded-full flex items-center justify-center text-white text-sm mr-3">
                            B
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-neutral-700">匿名用户B</span>
                                <div class="flex items-center">
                                    <div class="warmth-stars mr-2">
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="fas fa-star warmth-star text-xs"></i>
                                        <i class="far fa-star text-neutral-300 text-xs"></i>
                                    </div>
                                    <span class="text-xs text-neutral-500">8小时前</span>
                                </div>
                            </div>
                            <p class="text-sm text-neutral-700 leading-relaxed">
                                谢谢你的分享！我也要学着在忙碌中发现这些小确幸。你的话给了我很多正能量，继续保持这份美好的心境吧！💪
                            </p>
                            <div class="flex items-center justify-between mt-2">
                                <div class="flex items-center text-xs text-neutral-500">
                                    <i class="fas fa-heart mr-1 text-secondary"></i>
                                    <span>8人觉得有帮助</span>
                                </div>
                                <button class="btn-text text-xs">
                                    <i class="fas fa-heart mr-1"></i>
                                    赞同
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Privacy Info -->
            <div class="card bg-neutral-50">
                <div class="flex items-start">
                    <i class="fas fa-shield-alt text-primary mr-3 mt-1"></i>
                    <div class="flex-1">
                        <h4 class="font-medium text-sm mb-2">隐私保护说明</h4>
                        <p class="text-xs text-neutral-600 leading-relaxed">
                            你的日记通过隐私计算技术进行匿名化处理后才会漂流给其他用户。我们严格保护你的个人隐私，确保在传递温暖的同时守护你的安全。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // 页面功能
        document.addEventListener('DOMContentLoaded', function() {
            // 从URL参数获取日记ID
            const urlParams = new URLSearchParams(window.location.search);
            const diaryId = urlParams.get('id');
            
            if (diaryId && window.App) {
                loadDiaryData(diaryId);
            }
        });

        // 加载日记数据
        function loadDiaryData(diaryId) {
            // 这里可以根据ID加载具体的日记数据
            // 现在使用示例数据
            console.log('加载日记:', diaryId);
        }

        // 分享日记
        function shareDiary() {
            if (navigator.share) {
                navigator.share({
                    title: '暖言树洞 - 今天的阳光很温暖',
                    text: '分享一份来自暖言树洞的温暖心情',
                    url: window.location.href
                });
            } else {
                // 复制链接到剪贴板
                navigator.clipboard.writeText(window.location.href).then(() => {
                    App.utils.showToast('链接已复制到剪贴板', 'success');
                });
            }
        }

        // 显示更多选项
        function showMoreOptions() {
            const options = [
                { text: '编辑日记', icon: 'fas fa-edit', action: editDiary },
                { text: '删除日记', icon: 'fas fa-trash', action: deleteDiary },
                { text: '举报内容', icon: 'fas fa-flag', action: reportContent }
            ];
            
            // 这里可以显示一个底部弹窗或菜单
            // 现在简单用alert代替
            const choice = confirm('是否要编辑这篇日记？');
            if (choice) {
                editDiary();
            }
        }

        // 编辑日记
        function editDiary() {
            App.utils.showToast('跳转到编辑页面', 'info');
            // window.location.href = 'edit-diary.html?id=' + diaryId;
        }

        // 删除日记
        function deleteDiary() {
            const confirmed = confirm('确定要删除这篇日记吗？删除后无法恢复。');
            if (confirmed) {
                App.utils.showToast('日记已删除', 'success');
                setTimeout(() => {
                    window.location.href = 'home.html';
                }, 1500);
            }
        }

        // 举报内容
        function reportContent() {
            App.utils.showToast('感谢你的反馈，我们会认真处理', 'info');
        }

        // 评价AI回复
        function rateAIResponse() {
            App.utils.showToast('感谢你的反馈！这将帮助AI猫猫变得更好', 'success');
        }

        // 反馈AI回复
        function reportAIResponse() {
            const feedback = prompt('请告诉我们你的想法：');
            if (feedback) {
                App.utils.showToast('反馈已提交，谢谢你的建议！', 'success');
            }
        }
    </script>

    <style>
        /* 网格布局 */
        .grid {
            display: grid;
        }

        .grid-cols-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        /* 文章样式 */
        .prose p {
            margin-bottom: 1rem;
        }

        .prose p:last-child {
            margin-bottom: 0;
        }

        /* 渐变背景 */
        .bg-gradient-to-r {
            background-image: linear-gradient(to right, var(--bg-start), var(--bg-end));
        }

        .from-primary-50 {
            --bg-start: var(--primary-50);
        }

        .to-secondary-50 {
            --bg-end: var(--secondary-50);
        }

        /* 响应式调整 */
        @media (max-width: 640px) {
            .grid-cols-3 {
                grid-template-columns: repeat(3, 1fr);
                gap: 0.5rem;
            }
            
            .mood-emoji {
                font-size: 1.5rem;
            }
            
            .ai-cat {
                width: 32px;
                height: 32px;
                font-size: 1rem;
            }
        }
    </style>
</body>
</html>
